<template>
  <div class="service-arrangement">
    <div class="service-arrangement-item" v-for="item in list">
      <div class="title-block">
        <div class="title">{{item.title}}</div>
        <div class="time">{{item.time}}</div>
      </div>
      <div class="desc">{{item.desc}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ServiceArrangement",
  data(){
    return{
      list:[
        {title:'护学岗',time:'',desc:'酒泉第六中学 | 午 12:00-12:20 14:00-14:30 | 晚 18:30-19:00'},
        {title:'护学岗',time:'',desc:'酒泉第七中学 | 午 11:50-12:20 14:00-14:30 | 晚 17:50-18:20'},
        {title:'护医岗',time:'',desc:'上海市第一人民医院酒泉医院 | 全天 08:00-23:00'},
        {title:'夜巡岗',time:'',desc:'洪洋广场餐饮街 | 19:00-24:00'},
        {title:'夜巡岗',time:'',desc:'百合园夜市 | 19:00-24:00'},
        {title:'夜巡岗',time:'',desc:'神州路夜市 | 19:00-24:00'},
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.service-arrangement{
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .service-arrangement-item{
    width: 100%;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid $fontColorSecondary;
    margin-bottom: 10px;
    background: rgba(10, 167, 255, 0.1);
    .title-block{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .title{
        color: $fontColorSecondary;
        flex-grow: 1;
        font-weight: bold;
      }
      .time{
        font-size: 14px;
        color: #fff;
      }
    }
    .desc{
      color: #fff;
    }
  }
}
</style>
